html框架点击左边目录内容显示在右边框架里

html框架点击左边目录内容显示在右边框架 定义框架为目录 标题 内容 这三个框架,我们点击左边的目录,目录里面的内容会出现在内容这个框架里看下边怎么操作。

先创建第一个index.html文件,代码如下:

<!DOCTYPE html>
<html>
<head><meta charset="utf-8">
<title>index</title>
</head>
<frameset cols="20%,80%"><!--定义页面左边分20%右边分80%-->
<frame src="目录.html"name="left"><!--定义左边框架使用文件为目录.html框架的名字为lefr--><frameset rows="20%,80%"><!--定义右边80%分为上下两个框架一个20%一个80%-->
<frame src="标题.html" name="rightup"><!--80%中上边20%给标题.html文件使用,框架名字为rightup-->
<frame src="内容.html"name="rightdown"><!--80%中下边80%给内容.html文件使用,框架名字为rightdown-->
</frameset>
</frameset>
</html>

然后创建目录.html文件,代码如下:

<!DOCTYPE html>
<html>
  <head>
	<meta charset="utf-8">
	<title>目录</title>
  </head>
  <body>
  <h1>目录</h1>	
	<a href="内容1.html"target="rightdown">内容1</a><br> <!--将内容1文件的内容指定显示给名为rightdown的框架-->
 <a href="内容2.html"target="rightdown">内容2</a><br> <!--将内容2文件的内容指定显示给名为rightup的框架-->
  </body><!--上边的target为指定-->
</html>

创建标题.html代码如下:

<!DOCTYPE html>
<html>
  <head>
	<meta charset="utf-8" >
	<title>标题</title>
  </head>
  <body>	
	<h1>框架点击目录框架,显示在内容框架</h1> </body>
</html>

创建内容.html,代码如下:

<!DOCTYPE html>
<html>
  <head>
	<meta charset="utf-8">
	<title>内容</title>
  </head>
  <body>	
	请认真看注释!
  </body>
</html>

创建内容1.html这个文件需要点击目录才会显示代码如下:

<html>
 <head> 
  <meta charset="utf-8"> 
  <title>内容1</title> 
 </head> 
 <body > 
 我是御雪
  </body>
</html>

创建内容2.html意思同上,代码如下:

<!DOCTYPE html>
<html>
  <head>
	<meta charset="utf-8">
	<title>内容2</title>
  </head>
  <body>	
	csdn
  </body>
</html>

到这里就结束了!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值